$animationTime: .2s;
$animationType: linear;
$ratio: 375 / 10;
@function px2rem($px){
    @return $px / $ratio + rem;
}

@mixin absCenter {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
// 内容居中
@mixin center{
    display: flex;
    justify-content:center;
    // 水平方向
    align-items: center;
}

@mixin left{
    display: flex;
    justify-content:flex-start;
    align-items: center;
}

@mixin top {
    display: flex;
    justify-content:center;
    align-items: flex-start;
}

@mixin right{
    display: flex;
    justify-content:flex-end;
    align-items: center;
}

@mixin columnTop {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

@mixin columnLeft {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
// 垂直居中
@mixin columnCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

// 一行省略显示,文字的缩略显示，必须指定最外层的宽度
@mixin ellipsis {
    // ellipsis一行显示表示如果超出的时候使用省略号
    text-overflow: ellipsis;
    overflow: hidden;
    // 表示不换行
    white-space: nowrap;
}
// 两行省略
@mixin ellipsis2($line) {
    //标题显示两行
          // @include ellipsis;
          display: -webkit-box;
          //垂直方向，垂直排列
          -webkit-box-orient: vertical;
          //指定行数
          -webkit-line-clamp: $line;
          // 允许它换行
          white-space: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          // 文字换行的方式break-all表示任何情况下都能换行，keep-all保证到单词才换行
          word-break: keep-all;
}

@mixin scroll {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
}

@mixin leftBottom {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
// 图标的公用样式
.icon {
  color: #666;
  font-size: px2rem(38);// 16
}
// 标题的公用样式
.title {
    color: #666;
    font-size: px2rem(38);// 16
    font-weight: bold;
}